<template>
    <div>
      <Breadcrumb :items="['menu.system', '援助中心文件']" />
      <div>
        <a-spin :loading="pageLoading?.loading" style="width: 100%">
          <CardConponents>
            <a-button type="primary" @click="handleClick">新增</a-button>
          </CardConponents>
          <CardConponents>
            <a-table :data="dataList?.list" :pagination="pagination" @page-change="pageChange">
              <template #columns>
                <a-table-column title="id" data-index="id"></a-table-column>
                <a-table-column title="标题" data-index="title"></a-table-column>
                <a-table-column title="状态" data-index="status">
                  <template #cell="{ record }">
                    {{ showStatus( record) }}
                  </template>
                </a-table-column>
                <a-table-column title="文档" data-index="word_file"></a-table-column>
                <a-table-column title="排序" data-index="sort"></a-table-column>
                <a-table-column title="创建时间" data-index="create_time">
                  <template #cell="{ record }">
                    {{ record.create_time ? getTime(Number(record?.create_time)) : '' }}
                  </template>
                </a-table-column>
                <a-table-column title="操作">
                  <template #cell="{ record }">
                    <a-button type="primary" size="small" @click="handleEdidClick(record)">编辑</a-button>
                    <a-popconfirm content="确定要删除吗?" type="error" @ok=handleDelClick(record)>
                      <a-button type="primary" status="danger" size="small">删除</a-button>
                    </a-popconfirm>
                  </template>
                </a-table-column>
              </template>
            </a-table>
  
          </CardConponents>
          <a-modal :maskClosable=false v-model:visible="visible" :title="form.Id > 0 ? '编辑' : '编辑'" :footer="false">
            <a-form :model="form" @submit="handleSubmit">
              <a-form-item field="Title" label="标题" :rules="[{ required: true, message: '不能为空' }]">
                <a-input v-model="form.Title" />
              </a-form-item>
              <a-form-item field="StatusEd" label="状态">
                <a-switch :default-checked="true" v-model="form.StatusEd" />
              </a-form-item>
              
              <a-form-item field="Sort" label="排序">
                <a-input v-model="form.Sort" />
              </a-form-item>
  
              <!-- <a-form-item field="Content" label="内容">
                <a-textarea v-model="form.Content" placeholder="Please enter something" />
              </a-form-item> -->
              <a-form-item field="WordFile" label="电子文档">
                <UploadImg :wordFile="form?.WordFile" :parentInfo="fileUpload" :changeForm="changeForm" :type="'file'" />
              </a-form-item>
              <div class="btn">
                <a-button style="width: 100px;margin-right: 10px;" @click="cancelClick">
                  取消
                </a-button>
                <a-button style="width: 100px;" type="primary" html-type="submit" long :loading="loading">
                  提交
                </a-button>
              </div>
            </a-form>
          </a-modal>
        </a-spin>
      </div>
    </div>
  </template>
  
  
  <script lang="ts" setup>
  import CardConponents from '@/components/card/index.vue';
  import { reactive, ref } from 'vue';
  import useLoading from '@/hooks/loading';
  import { onMounted } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import UploadImg from '@/components/uploadImg/index.vue';//上传
  import { list, add, edit, del } from '@/api/assist_file';//获取列表
  import { getTime } from '@/utils/auth'
  import { fileUpload } from '@/api/system'
  const pageLoading: any = reactive({ loading: false });
  
  const pageChange = (current: any) => {
    getList()
  }
  
  const pagination = reactive({
    pageSize: 10,
    total: 0,
    current: 1,
  })
  
  const form: any = reactive({
    Title: '',
  
    WordFile: '',
    StatusEd:'',
    Sort: '',
    Id: '',
  });
  
  const visible = ref(false);
  const clearForm = () => {
    form.Title = ''
    form.WordFile = ''
    form.StatusEd = ''
    form.Sort = ''
    form.Id = ''
  }
  const cancelClick = () => {
    visible.value = false;
    clearForm()
  }
  
  //新增弹框
  const handleClick = () => {
    visible.value = true;
    clearForm()
  };
  
  const showStatus = (value: any) => {
    return value.status === 1 ? '正常' : '禁止'
  }
  
  const changeForm = (val: any) => {
    form.WordFile = val
  }
  
  
  const { loading, setLoading } = useLoading();
  
  onMounted(() => {
    getList()
  });
  
  //数据
  const dataList: any = reactive({
    list: [],
    total: 0
  });
  
  const buttonDataList: any = reactive({
    list: []
  })
  
  //请求
  const getList = async () => {
    pageLoading.loading = true
    const res = await list({ data: { Offset: 0, Limit: 10 } })
    pageLoading.loading = false
    dataList.list = res?.data?.List
    dataList.total = res?.data?.Total
  }
  
  
  //新增、编辑
  const handleSubmit = async ({ errors, values }: any) => {
    if (loading.value) return;
    if (!errors) {
  
      if (values.StatusEd == "true" || values.StatusEd == true) {
        values.Status = 1
      } else {
        values.Status = 0
      }
      try {
        setLoading(true);
        if (form.Id > 0) {
          const res: any = await edit(values);
          Message.success(res?.msg);
          setLoading(false);
          if (res?.code == 1) {
            visible.value = false;
            clearForm()
            getList()
          }
        } else {
          const res: any = await add(values);
          Message.success(res?.msg);
          setLoading(false);
          if (res?.code == 1) {
            visible.value = false;
            clearForm()
            getList()
          }
        }
      } catch (error) {
        setLoading(false);
      }
    }
  };
  
  
  const handleEdidClick = (value: any) => {
    // clearForm()
    visible.value = true;
    // clearForm()
    form.Title = value.title
    form.StatusEd = value.status == 1 ? true : false
    form.Sort = value.sort
    form.Id = value.id
    form.WordFile = value.word_file
    
  }
  
  // 删除
  const handleDelClick = async (value: any) => {
    const res: any = await del({ Id: value?.id });
    Message.success(res?.msg)
    if (res?.code === 1) {
  
      getList()
    }
  }
  </script>
  
  <script lang="ts">
  export default {
    name: 'File',
  };
  </script>
  
  <style lang="less" scoped>
  .btn {
    display: flex;
    justify-content: flex-end;
  }
  </style>